<template>
    <el-form style="width: 45%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <!--此处的label为标签名，prop为对应的属性的校验规则-->
        <el-form-item label="图书编号" prop="name">
            <el-input v-model="ruleForm.id" readonly=""></el-input>     <!--此处对id设置了只读属性-->
        </el-form-item>

        <el-form-item label="图书名称" prop="name">
            <!--v-model是获取数据对象的属性名称-->
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
            <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publish">
            <el-input v-model="ruleForm.publish"></el-input>
        </el-form-item>

        <el-form-item>
            <!--此处规定了提交按钮对应的点击事件是：submitForm-->
            <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    id:'',
                    name: '',
                    author: '',
                    publish: '',
                },
                rules: {
                    name: [
                        /*required设置是否为必须项；message为提示信息；trigger为触发事件的时刻*/
                        { required: true, message: '请输入图书名称', trigger: 'blur' },
                        { min: 1, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '请输入作者名', trigger: 'blur' }
                    ],
                    publish: [
                        { required: true, message: '请输入出版社名', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            /*此处的submitForm事件的作用是：在校验审核通过且比较后端的数据相同时，弹出信息添加成功的提示*/
            submitForm(formName) {
                const _this = this;
                /*此处为submitForm的事件*/
                this.$refs[formName].validate((valid) => {
                    if (valid) {    /*即全部规则成立时，提示此消息。*/

                        /*处理接收到后端对应网址的数据   this.ruleForm为对应的对象信息*/
                        axios.put('http://localhost:8181/book/update',this.ruleForm).then(function (resp) {
                            if(resp.data == "success"){
                                /*消息提示框设置：完成信息添加成功的提示后，再跳转*/
                                _this.$alert('《'+_this.ruleForm.name+'》修改成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        /*完成信息添加成功后的，页面跳转*/
                                        _this.$router.push('/bookManage');
                                    }
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created(){
            //此处实现功能：将id传至后台，获取数据后，重新拿到此处进行回显。
            const _this = this;
            axios.get('http://localhost:8181/book/findById/'+this.$route.query.id).then(function (resp) {
                //数据显示的完成：将对应的数据赋给此处的属性
                _this.ruleForm = resp.data
            })
        }

    }
</script>

<style scoped>

</style>